<template>
  <div class="main">
<!--    &lt;!&ndash;    顶部导航栏&ndash;&gt;-->
<!--    <myheader></myheader>-->
<!--    中间登录框-->
    <div class="login_main container" >
      <el-main>
        <el-row>
          <el-col :span="12" :offset="6">
            <div id="loginBox">
              <h4 class="pt-5 pb-2" style="font-weight: bold">管 理 员 登 录</h4>
              账号：<el-input  type="text" placeholder="请输入管理员账号" v-model="loginForm.admin_account"></el-input><br>
              密码：<el-input type="password"  placeholder="请输入密码" v-model="loginForm.admin_password" @keyup.enter.native="login"></el-input><br>
              <div class="pb-3">
                <el-button type="primary" class="mr-3" @click="login">登录</el-button>
                <el-button type="primary" @click="clearInput">重置</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </div>
<!--    &lt;!&ndash;    底部导航栏&ndash;&gt;-->
<!--    <myfooter></myfooter>-->
  </div>
</template>

<script>
import myheader from "@/components/myheader";
import myfooter from "@/components/myfooter";
import {adminLogin} from "@/api/Admin";


export default {
  name: "login",
  components:{
    myheader,
    myfooter,
  },
  data(){
    return{
      loginForm: {
        admin_account:"",
        admin_password:"",

      },

    }
  },
  methods:{
    //清空输入框
    clearInput(){
      this.loginForm="";
    },
  //  登录接口
    login(){

      if(this.loginForm.admin_account.length==0){
        this.$msg.warning("账号不能为空！");
        return false;
      }
      if(this.loginForm.admin_password.length==0){
        this.$msg.warning("密码不能为空！");
        return false;
      }

      adminLogin({
        admin_account:this.loginForm.admin_account,
        admin_password:this.loginForm.admin_password
      }).then(res=>{
        if(res.data.code==0){
          this.$msg.error(res.data.msg);
        }else{
          this.$msg.success(res.data.msg);
          //存入session
          window.sessionStorage.setItem('token',res.data.token);
          window.sessionStorage.setItem('admin_name',res.data.admin_name);
          //跳转主页面
          this.$router.push({path:'/Main/Show_Main'});
        }
      })


    },

  },
  created() {


  }

}
</script>

<style scoped>
.main{
  background: url('~@/assets/login_back.jpg') no-repeat center;
  background-size:cover;
  width: 100%;
}
.login_main{
  height: 950px;
  background-attachment:fixed;
  display:-webkit-flex;
  align-items:stretch;
}
.el-main {
  /*background-color: #fff;*/
  color: #333;
  text-align: center;
  line-height: 80px;

}
/*    输入框样式*/
.el-input{
  width: 50%;
}

/*放账号密码input的div*/
#loginBox{
  background-color:rgba(255,255,255,0.75);
  border-radius: 15px;
  margin-top:40%;
}
</style>
